<template>
    <view class="bg-content">
        <u-cell-group v-if="tbCommunity">
            <myImg :obj="tbCommunity" :sysFile="{fkId: tbCommunity.id}" :key="tbCommunity.id"
                   :customStyle="'pointer-events: none; height: 250px;  width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center;'"
                   :defaultUrl="'/pages/sub/sub3-community-platform/static/default-image/404.png'"
                   v-if="tbCommunity"
            ></myImg>
            <u-cell-item title="省份" :arrow="false" use-label-slot>
                <view slot="label">
                    {{tbCommunity.provinceName | toEmptyStr('未设置')}}
                </view>
            </u-cell-item>
            <u-cell-item title="城市" :arrow="false" use-label-slot>
                <view slot="label">
                    {{tbCommunity.cityName | toEmptyStr('未设置')}}
                </view>
            </u-cell-item>
            <u-cell-item title="地区" :arrow="false" use-label-slot>
                <view slot="label">
                    {{tbCommunity.areaName | toEmptyStr('未设置')}}
                </view>
            </u-cell-item>
            <u-cell-item title="商城编码" :arrow="false" use-label-slot>
                <view slot="label">
                    {{tbCommunity.code | toEmptyStr('未设置')}}
                </view>
            </u-cell-item>
            <u-cell-item title="商城名称" :arrow="false" use-label-slot>
                <view slot="label">
                    {{tbCommunity.name | toEmptyStr('未设置')}}
                </view>
            </u-cell-item>
            <u-cell-item title="标题" :arrow="false" use-label-slot>
                <view slot="label">
                    {{tbCommunity.title | toEmptyStr('未设置')}}
                </view>
            </u-cell-item>
            <u-cell-item title="副标题" :arrow="false" use-label-slot>
                <view slot="label">
                    {{tbCommunity.subTitle | toEmptyStr('未设置')}}
                </view>
            </u-cell-item>
            <u-cell-item title="简介" :arrow="false" use-label-slot>
                <view slot="label">
                    {{tbCommunity.introduction | toEmptyStr('未设置')}}
                </view>
            </u-cell-item>
            <u-cell-item title="地址" :arrow="false" use-label-slot>
                <view slot="label">
                    {{tbCommunity.address | toEmptyStr('未设置')}}
                </view>
            </u-cell-item>
            <u-cell-item title="电话" :arrow="false" use-label-slot>
                <view slot="label">
                    {{tbCommunity.phone | toEmptyStr('未设置')}}
                </view>
            </u-cell-item>
            <u-cell-item title="邮箱" :arrow="false" use-label-slot>
                <view slot="label">
                    {{tbCommunity.email | toEmptyStr('未设置')}}
                </view>
            </u-cell-item>
            <u-cell-item title="商城类型" :arrow="false" use-label-slot>
                <view slot="label">
                    {{tbCommunity.typeText | toEmptyStr('未设置')}}
                </view>
            </u-cell-item>
            <u-cell-item title="商城佣金" :arrow="false" use-label-slot>
                <view slot="label">
                    {{tbCommunity.brokerageRate | toEmptyStr('未设置')}}
                </view>
            </u-cell-item>
            <u-cell-item title="应用推广粉丝收益比例" :arrow="false" use-label-slot>
                <view slot="label">
                    {{tbCommunity.expandEarningsRate | toEmptyStr('未设置')}}
                </view>
            </u-cell-item>
            <u-cell-item title="应用推广粉丝的粉丝益比例" :arrow="false" use-label-slot>
                <view slot="label">
                    {{tbCommunity.thirdEarningsRate | toEmptyStr('未设置')}}
                </view>
            </u-cell-item>
            <u-cell-item title="是否开放开店功能" :arrow="false" use-label-slot>
                <view slot="label">
                    {{tbCommunity.isOpenStore ? '是' : '否'}}
                </view>
            </u-cell-item>
            <u-cell-item title="是否开放参与商城功能" :arrow="false" use-label-slot>
                <view slot="label">
                    {{tbCommunity.isOpenCommunity ? '是' : '否'}}
                </view>
            </u-cell-item>
            <u-cell-item title="创建时间" :arrow="false" use-label-slot>
                <view slot="label">
                    {{tbCommunity.createTime}}
                </view>
            </u-cell-item>
            <u-cell-item title="商城二维码（非公司模式下微信扫码直接访问该商城）" :arrow="false" use-label-slot>
                <view slot="label">
                    <canvas id="qrcode" canvas-id="qrcode" style="width: 154px;height: 154px;" @click="previewImage()"/>
                    <div style="color: red;">制作海报提示：请点击二维码生成图片，长按图片可保存到本地。并在应用市场下载“海报”相关第三方软件进行制作。</div>
                </view>
            </u-cell-item>
            <u-cell-item title="商城底部导航栏显示风格" :arrow="false" use-label-slot>
                <view slot="label">
                    <image style="height: 45px;" :src="`/pages/sub/sub3-community-platform/static/img/tabbar/tabbar${tbCommunity.tabbarType}.jpg`"></image>
                </view>
            </u-cell-item>
        </u-cell-group>

        <div style="padding-bottom: 60px;"></div>

        <div class="custom-bottom-button">
            <label @click="navigateTo('/pages/sub/sub3-community-platform/community-platform/community-platform-community/community-platform-community-edit/index', null, tbCommunity)">
                编辑商城
            </label>
        </div>
    </view>
</template>

<script>

    import myImg from '@/components/my-img'
    import {TbCommunityService} from "@/dev/services/tb-community.service";
    import uQRCode from '@/pages/sub/sub3-community-platform/static/plugins/uqrcode.js'

    export default {
        data() {
            return {
                tbCommunity: null
            }
        },
        components: {
            myImg
        },
        onShow() {
            const _self = this;
            new TbCommunityService().findTbCommunityById(_self.globalVariable.userInfo.tbCommunityAdmin.communityId).then(result => {
                _self.tbCommunity = result;
            });
            _self.showQRCode();
        },
        methods: {
            /**
             * 显示商城二维码
             */
            showQRCode() {
                const _self = this;
                uQRCode.make({
                    canvasId: 'qrcode',
                    componentInstance: this,
                    text: _self.globalVariable.userInfo.tbCommunity.qrCode,  // 二维码内容
                    size: 150,
                    margin: 10,
                    backgroundColor: '#ffffff',
                    foregroundColor: '#000000',
                    fileType: 'jpg',
                    correctLevel: uQRCode.errorCorrectLevel.H,
                    success: res => {
                        console.log(res)
                    }
                })
            },
            /**
             * 全屏显示二维码，长按可以保存二维码图片
             */
            previewImage() {
                // 在自定义组件下，当前组件实例的 this，以操作组件内 <canvas> 组件
                uni.canvasToTempFilePath({
                    canvasId: 'qrcode',
                    success: function (res) {
                        // 在H5平台下，tempFilePath 为 base64
                        console.log(res.tempFilePath)

                        // 预览图片
                        uni.previewImage({
                            urls: [res.tempFilePath],
                        });
                    }
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
</style>

